<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>导航菜单</title>
		<style type="text/css">
			li { list-style: none; line-height: 22px; cursor: pointer;
				width: 150px; float: left; text-align: center; }
		</style>
	</head>
	<body>
		<ul>
			<li id="current">jQuery简介</li>
			<li>jQuery语法</li>
			<li>jQuery选择器</li>
			<li>jQuery事件与动画</li>
			<li>jQuery方法</li>
		</ul>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				/**一级内容悬浮**/
				$("li").mouseover(function() {
					$(this).css({ "background": "orange"}); //当前li 背景颜色为橙色
				}).mouseout(function() {
					$(this).css({"background": "#ffffff"});
				});
			});
		</script>
	</body>
</html>